<template>
  <n-space justify="center">
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning">
          <template #icon>
            <n-icon>
              <!-- icon控制图标样式 -->
              <Qq />
              <!-- qq图标 -->
            </n-icon>
          </template>
        </n-button>
      </template>
      <span> 1624362469 </span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning">
          <template #icon>
            <n-icon>
              <!-- icon控制图标样式 -->
              <LogoWechat />
              <!-- 微信图标 -->
            </n-icon>
          </template>
        </n-button>
      </template>
      <span> TQL1624362469 </span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning">
          <template #icon>
            <n-icon>
              <!-- icon控制图标样式 -->
              <MailBulk />
              <!-- 邮箱图标 -->
            </n-icon>
          </template>
        </n-button>
      </template>
      <span> 1624362469@qq.com </span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning">
          <template #icon>
            <n-icon>
              <!-- icon控制图标样式 -->
              <MobileAlt />
              <!-- 手机图标 -->
            </n-icon>
          </template>
        </n-button>
      </template>
      <span> 18323175938 </span>
    </n-tooltip>
  </n-space>
</template>

<script setup lang="ts">
import { NSpace, NTooltip, NButton, NIcon } from "naive-ui";
import { Qq, MailBulk, MobileAlt } from "@vicons/fa";
import { LogoWechat } from "@vicons/ionicons5";
const showPopover = ref(false);
</script>
